<template>
  <div class="map-container" ref="mapRef">地图</div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
// 引入地图数据
import chinaJSON from "./china.json";
// 获取地图实例
const mapRef = ref();
// 注册中国地图
echarts.registerMap("china", chinaJSON as any);

// 定义航线数据
const flightRoutes = [
  {
    name: "北京-昆明",
    coords: [
      [116.405285, 39.904989], // 北京
      [102.712251, 25.040609], // 昆明
    ],
    color: "#FF6B6B",
  },
  {
    name: "上海-乌鲁木齐",
    coords: [
      [121.473701, 31.230416], // 上海
      [87.616848, 43.825592], // 乌鲁木齐
    ],
    color: "#4ECDC4",
  },
  {
    name: "广州-哈尔滨",
    coords: [
      [113.264385, 23.129112], // 广州
      [126.642464, 45.756967], // 哈尔滨
    ],
    color: "#45B7D1",
  },
  {
    name: "成都-拉萨",
    coords: [
      [104.065735, 30.659462], // 成都
      [91.1145, 29.64415], // 拉萨
    ],
    color: "#FFBE0B",
  },
  {
    name: "西安-三亚",
    coords: [
      [108.948024, 34.263161], // 西安
      [109.511909, 18.252847], // 三亚
    ],
    color: "#A05195",
  },
];

onMounted(() => {
  // 获取地图实例
  const myEcharts = echarts.init(mapRef.value);
  // 设置配置项
  myEcharts.setOption({
    title: {
      left: "center",
      top: "20px",
      textStyle: {
        color: "#ffffff",
        fontSize: 20,
      },
    },
    tooltip: {
      trigger: "item",
      formatter: (params) => {
        if (params.seriesType === "lines") {
          return params.data.name;
        }
        return params.name;
      },
    },
    geo: {
      map: "china",
      roam: true, // 允许缩放和平移
      zoom: 1.2,
      itemStyle: {
        areaColor: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "#0f2027", // 渐变起始色
            },
            {
              offset: 0.5,
              color: "#203a43",
            },
            {
              offset: 1,
              color: "#2c5364", // 渐变结束色
            },
          ],
          global: false,
        },
        borderColor: "#90caf9",
        borderWidth: 1,
      },
      // 地图高亮的效果
      emphasis: {
        itemStyle: {
          areaColor: "#FFD700", // 高亮时颜色（金色）
          borderColor: "#fff",
          borderWidth: 1.5,
        },
        label: {
          show: true,
          color: "#fff",
          fontWeight: "bold",
          fontSize: 40,
        },
      },
      label: {
        show: true,
        color: "#ffffff",
        fontSize: 14,
      },
    },
    series: [
      {
        type: "lines", // 航线
        coordinateSystem: "geo",
        zlevel: 2,
        effect: {
          show: true,
          period: 4, // 动画周期，值越小速度越快
          trailLength: 0.4, // 特效尾迹长度[0,1]值越大，尾迹越长
          symbol: "arrow", // 箭头图标
          symbolSize: 10,
          loop: true, // 循环动画
        },
        lineStyle: {
          opacity: 0.8,
          width: 2,
          curveness: 0.2,
        },
        data: flightRoutes.map((route) => ({
          ...route,
          lineStyle: {
            color: route.color,
            width: 2,
            curveness: 0.2, // 曲线程度
            type: "solid",
            opacity: 0.8,
          },
          effect: {
            show: true,
            period: 3, // 动画周期
            trailLength: 0.2, // 特效尾迹长度
            symbol: "arrow", // 箭头
            symbolSize: 8,
            color: route.color,
            constantSpeed: 30, // 动画速度
            loop: true, // 循环动画
          },
        })),
      },
      // 添加一个散点系列用于显示城市名称
      {
        type: "scatter",
        coordinateSystem: "geo",
        data: flightRoutes.flatMap((route) => [
          {
            name: route.name.split("-")[0],
            value: route.coords[0],
            symbolSize: 8,
            itemStyle: { color: "#fff" },
          },
          {
            name: route.name.split("-")[1],
            value: route.coords[1],
            symbolSize: 8,
            itemStyle: { color: "#fff" },
          },
        ]),
        symbol: "circle",
        symbolSize: 6,
        label: {
          show: true,
          formatter: (params: any) => params.data.name,
          position: "right",
          color: "#fff",
          fontSize: 12,
        },
        itemStyle: {
          color: "#FFD700",
        },
      },
    ],
    // 添加图例
    legend: {
      orient: "vertical",
      right: 10,
      top: "center",
      data: flightRoutes.map((route) => route.name),
      textStyle: {
        color: "#fff",
      },
    },
    // 添加动画配置
    animation: true,
    animationDuration: 2000,
    animationEasing: "cubicInOut",
    animationDurationUpdate: 1000,
    animationEasingUpdate: "cubicInOut",
  });

  // 响应式调整
  window.addEventListener("resize", () => {
    myEcharts.resize();
  });
});
</script>

<style scoped>
.map-container {
  width: 100%;
  height: 100vh; /* 确保容器有足够的高度 */
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}
</style>
